<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>排行榜</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		body{
			background-color: #F5F5F5;
		}
		.ranking{
			padding: 1rem;
		}
		.tabList{
			display: flex;
			background-color: #f2f2f2;
			padding: 1rem 0;
			background-color: #fff;
		}
		.tabs{
			width: 50%;
			text-align: center;
			font-size: 1rem;
			color: #888;
		}
		.on{
			color: #007AFF;
			font-weight: bold;
			font-size: 1.125rem;
		}
		.rankBox{
			background-color: #fff;

		}
		.rankDetail{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			color: #888;
			padding: .5rem;
			border-top: 1px solid #E4E4E4;
		}
		.rankDetail img{
			width: 3rem;
			border-radius: 3rem;
			margin-left: 1rem;
			margin-right: 1rem;
		}
		.rankInfor{
			width: 100%;
		}
		.rankPrice{
			white-space: nowrap;
			color: #333;
			/* font-weight: bold; */
		}
		.rankDetail:first-child{
			display: block;
			width: 33%;
			float: left;
		}
		.rankDetail:first-child img{
			width: 5rem;
			text-align: center;
		}
		.rankDetail:first-child .rankNum{
			position: absolute;
			bottom: 0;
			right: .3rem;
			width: 1.2rem;
			height: 1.2rem;
			line-height: 1.2rem;
			border-radius: 1rem;
			color: #fff;
			background-color: #FFCC00;
			text-align: center;
		}
		.rankDetail:first-child .rankInfor{
			text-align: center;
			margin: .5rem 0;
		}
		.rankDetail:first-child .rankPrice{
			text-align: center;
		}
		
		.rankDetail:nth-of-type(2){
			display: block;
			width: 33%;
			float: left;
		}
		.rankDetail:nth-of-type(2) img{
			width: 5rem;
			text-align: center;
		}
		.rankDetail:nth-of-type(2) .rankNum{
			position: absolute;
			bottom: 0;
			right: .3rem;
			width: 1.2rem;
			height: 1.2rem;
			line-height: 1.2rem;
			border-radius: 1rem;
			color: #fff;
			background-color: #bcbcbc;
			text-align: center;
		}
		.rankDetail:nth-of-type(2) .rankInfor{
			text-align: center;
			margin: .5rem 0;
		}
		.rankDetail:nth-of-type(2) .rankPrice{
			text-align: center;
			color: #FF0000;
		}
		
		.rankDetail:nth-of-type(3){
			display: block;
			width: 33%;
			float: left;
		}
		.rankDetail:nth-of-type(3) img{
			width: 5rem;
			text-align: center;
		}
		.rankDetail:nth-of-type(3) .rankNum{
			position: absolute;
			bottom: 0;
			right: .3rem;
			width: 1.2rem;
			height: 1.2rem;
			line-height: 1.2rem;
			border-radius: 1rem;
			color: #fff;
			background-color: #f76045;
			text-align: center;
		}
		.rankDetail:nth-of-type(3) .rankInfor{
			text-align: center;
			margin: .5rem 0;
		}
		.rankDetail:nth-of-type(3) .rankPrice{
			text-align: center;
		}
		.ranks{
			display: flex;
			position: relative;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenters">排行榜</div>
			<!-- <div class="tabRight">收益说明</div> -->
		</div>
	</div>
	<div class="ranking">
		<div class="tabList">
			<div class="tabs on">昨日排行</div>
			<div class="tabs">今日排行</div>
			<div class="tabs">总排行</div>
		</div>
		<div class="rankBox cleardrift">
			<div class="rankDetail">
				<div class="ranks">
					<div class="rankNum">2</div>
					<img src="../assets/meinv.png" >
				</div>
				<div class="rankInfor">
					<div class="rankName">拍拉图</div>
					<div class="rankTg">Lv:推广者1</div>
				</div>
				<div class="rankPrice">¥ 1231.12</div>
			</div>
			<div class="rankDetail cleardrift">
				<div class="ranks">
					<div class="rankNum">1</div>
					<img src="../assets/meinv.png" >
				</div>
				<div class="rankInfor">
					<div class="rankName">拍拉图</div>
					<div class="rankTg">Lv:推广者1</div>
				</div>
				<div class="rankPrice">¥ 1231.12</div>
			</div>
			<div class="rankDetail cleardrift">
				<div class="ranks">
					<div class="rankNum">3</div>
					<img src="../assets/meinv.png" >
				</div>
				<div class="rankInfor cle">
					<div class="rankName">拍拉图</div>
					<div class="rankTg">Lv:推广者1</div>
				</div>
				<div class="rankPrice">¥ 1231.12</div>
			</div>
			<div class="rankDetail cleardrift">
				<div class="ranks">
					<div class="rankNum">4</div>
					<img src="../assets/meinv.png" >
				</div>
				<div class="rankInfor">
					<div class="rankName">拍拉图</div>
					<div class="rankTg">Lv:推广者1</div>
				</div>
				<div class="rankPrice">¥ 1231.12</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>
	$(function(){
			$('.tabs').click(function(){
				var index = $(this).index();
				$(this).addClass("on").siblings().removeClass("on");
	//       		 $(".shouquanBox").eq(index).addClass("active").siblings().removeClass("active");
			})
		})
</script>
</html>